<template>
    <div class="todo">
        <h1 class="title">todo</h1>
        <Input @confirmAdd="confirmAdd"/>
        <List @confirmDel="confirmDel" :list="list"/>
    </div>
</template>

<script>
import Input from './input.vue'
import List from './list.vue'
export default {
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    // 没有当前vm的实例
    // next的回调中有vm
    next(vm => {
      console.log(vm)
    })
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },
  inject: ['root', 'data'],
  components: {
    Input,
    List
  },
  data () {
    return {
      list: []
    }
  },
  mounted () {
    console.log(
      this.$parent,
      this.$parent.$options.name,
      this.root.$options.name,
      '来自 new Vue() 中的 value=' + this.data.value
    )
  },
  methods: {
    confirmAdd (data) {
      this.list.unshift(data)
    },
    confirmDel (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.title {
  color: red;
  background: url(./images/bg.jpg);
}
</style>


